<template>
    <div class="header-top">
        <div class="header-back" @click="clickBack">
            <img src="../assets/img/back-white.png">
        </div>
        <span class="headr-title">{{title}}</span>
        <div class="header-right">
            <slot name="headerRight"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "headerTop",
        props:["title","backUrl"],
        data(){
            return{

            }
        },
        methods:{
            clickBack(){
                if (this.backUrl!=null){
                    this.$router.replace(this.backUrl)
                }else {
                    this.$router.back(-1)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .header-top{
        width: 100%;
        height: $header-top;
        background: $main-color;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;
        .header-back{
            width: 60px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 10px;
            img{
                width: 20px;
                height: 20px;
            }
        }
        .headr-title{
            color: #ffffff;
            font-size: $header-title;
        }
        .header-right{
            width: 60px;
            height: 100%;
        }
    }
</style>